import moment from 'moment';
import { connect } from 'umi';
import { Modal, Table, Button, Checkbox, Spin } from 'antd';
import { useTRState } from '#/utils/trHooks.jsx';
import styles from './index.less';
import { tableLocale } from '@/tool/components/PageEmpty';
import planIcon from '@/assets/img/plan_icon.png';
import { SyncOutlined } from '@ant-design/icons';
import { getRegistrationList, revokeOrder } from '../..//services';
import { HttpCode } from '#/utils/contacts';
import { TRMessage } from '#/components';

const { Column } = Table;
//   {
//     hourOrder: '0015-0030',
//     stationName: '大山台一二期',
//     status: '成功',
//     sumStep: 5,
//     step: 1,
//     electricPriceType: 20,
//     electricEnergy: 20,
//     strategyName: '大山台一二期',
//     strategyId:1
//   },
//   {
//     hourOrder: '0015-0030',
//     stationName: '大山台一二期',
//     status: '成功',
//     sumStep: 5,
//     step: 2,
//     electricPriceType: 20,
//     electricEnergy: 20,
//     strategyName: '大山台一二期',
//     strategyId:1
//   },
//   {
//     hourOrder: '0015-0030',
//     stationName: '大山台一二期',
//     status: '成功',
//     sumStep: 5,
//     step: 3,
//     electricPriceType: 20,
//     electricEnergy: 20,
//     strategyName: '大山台一二期',
//     strategyId:1
//   },
//   {
//     hourOrder: '0015-0030',
//     stationName: '大山台一二期',
//     status: '成功',
//     sumStep: 5,
//     step: 4,
//     electricPriceType: 20,
//     electricEnergy: 20,
//     strategyName: '大山台一二期',
//     strategyId:1
//   },
//   {
//     hourOrder: '0015-0030',
//     stationName: '大山台一二期',
//     status: '成功',
//     sumStep: 5,
//     step: 5,
//     electricPriceType: 20,
//     electricEnergy: 20,
//     strategyName: '大山台一二期',
//     strategyId:1
//   },
//   {
//     hourOrder: '0215-0230',
//     stationName: '大山台一二期',
//     status: '成功',
//     sumStep: 1,
//     step: null,
//     electricPriceType: 20,
//     electricEnergy: 20,
//     strategyName: '大山台一二期',
//     strategyId:2
//   },
// ];
const OrderStatus = ({ powerLimitInfo, provinceId, type }) => {
  const [state, setState] = useTRState({
    visible: false,
    detail_info: [],
    time: '',
    programmeIds: [],
    reportOverViewIds: [],
    strategyIds: [],
    loading: false,
  });
  const fetch = async () => {
    const res = await getRegistrationList(provinceId, type);
    if (res.statusCode === HttpCode.SUCCESS) {
      setState({
        detail_info: res.data,
        time: moment().format('YYYY.MM.DD HH:mm:ss'),
        loading: false,
      });
    } else {
      setState({ loading: false });
    }
  };
  const onCheckChange = (e, strategyId, programmeId, reportOverViewId) => {
    let strategyIds = JSON.parse(JSON.stringify(state.strategyIds));
    let programmeIds = JSON.parse(JSON.stringify(state.programmeIds));
    let reportOverViewIds = JSON.parse(JSON.stringify(state.reportOverViewIds));
    if (e.target.checked) {
      strategyIds.push(strategyId);
      programmeIds.push(programmeId);
      reportOverViewIds.push(reportOverViewId);
    } else {
      strategyIds = strategyIds.filter((item) => {
        return item != strategyId;
      });
      programmeIds = programmeIds.filter((item) => {
        return item != programmeId;
      });
      reportOverViewIds = reportOverViewIds.filter((item) => {
        return item != reportOverViewId;
      });
    }
    setState({ strategyIds, programmeIds, reportOverViewIds });
  };
  const toBackOrder = async (record) => {
    if (!!record?.editPermission || state.strategyIds.length > 0) {
      const res = await revokeOrder({
        strategyIds: !!record ? [record.strategyId] : state.strategyIds,
        programmeIds: !!record ? [record.programmeId] : state.programmeIds,
        reportViewIds: !!record ? [record.reportOverViewId] : state.programmeIds,
      });
      if (res.statusCode === HttpCode.SUCCESS) {
        TRMessage.success('撤销成功');
        setState({ loading: true });
        fetch();
      } else {
        TRMessage.error(res?.message || '撤销失败！');
      }
    }
  };
  return (
    <>
      <Modal
        className={styles.model_detail}
        centered={true}
        title={
          <div className={styles.modalTitle}>
            <img src={planIcon} />
            <span className={styles.text}>挂单状态</span>
          </div>
        }
        footer={null}
        visible={state.visible}
        onCancel={() => {
          setState({ visible: false });
        }}
      >
        <Spin spinning={state.loading}>
          <div className={styles.flex_row}>
            <div
              className={styles.right_info}
              onClick={() => {
                setState({ loading: true });
                fetch();
              }}
            >
              更新时间：
              {state.time}
              <a>
                <SyncOutlined />
                刷新
              </a>
            </div>
            <Button
              disabled={state.strategyIds.length < 1}
              onClick={() => {
                toBackOrder();
              }}
            >
              批量撤销
            </Button>
          </div>
          <Table
            className={styles.table}
            dataSource={state.detail_info}
            locale={tableLocale}
            rowKey="strategyId"
            bordered={true}
            pagination={false}
          >
            <Column
              title=""
              align="center"
              dataIndex=""
              key=""
              render={(text, record) => {
                const rowSpan = record?.sumStep || 1;
                return {
                  props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                  children: (
                    <Checkbox
                      disabled={!record?.editPermission}
                      onChange={(e) => onCheckChange(e, record.strategyId, record.programmeId)}
                    />
                  ),
                };
              }}
            />
            <Column
              title="标底日"
              align="center"
              dataIndex="markDate"
              key="markDate"
              render={(text, record) => {
                const rowSpan = record?.sumStep || 1;
                return {
                  props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                  children: text,
                };
              }}
            />
            <Column
              title="场站"
              align="center"
              dataIndex="stationName"
              key="stationName"
              render={(text, record) => {
                const rowSpan = record?.sumStep || 1;
                return {
                  props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                  children: text,
                };
              }}
            />
            <Column
              align="center"
              title="所属方案"
              dataIndex="titleTactics"
              key="titleTactics"
              render={(text, record) => {
                const rowSpan = record?.sumStep || 1;
                return {
                  props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                  children: text,
                };
              }}
            />
            <Column
              align="center"
              title="时间段"
              dataIndex="hourOrder"
              key="hourOrder"
              render={(text, record) => {
                const rowSpan = record?.sumStep || 1;
                return {
                  props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                  children: text,
                };
              }}
            />
            <Column
              align="center"
              title="阶梯段"
              dataIndex="step"
              key="step"
              render={(text, record) => {
                return text || '-';
              }}
            />
            <Column
              align="center"
              title={
                <>
                  电力<span className={styles.danwei}>（MW）</span>
                </>
              }
              dataIndex="electric"
              key="electric"
            />
            <Column
              align="center"
              title={
                <>
                  电价<span className={styles.danwei}>（元/MWh）</span>
                </>
              }
              dataIndex="price"
              key="price"
            />
            <Column
              align="center"
              title="操作"
              render={(text, record) => {
                const rowSpan = record?.sumStep || 1;
                return {
                  props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                  children: (
                    <a
                      style={{ color: record?.editPermission ? 'red' : 'gray' }}
                      onClick={() => {
                        toBackOrder(record);
                      }}
                    >
                      撤销
                    </a>
                  ),
                };
              }}
            />
          </Table>
        </Spin>
      </Modal>
      <Button
        onClick={() => {
          setState({ visible: true, loading: true });
          fetch();
        }}
      >
        挂单状态
      </Button>
    </>
  );
};
export default connect(({ interprovincialSpotDeclaration }) => ({
  powerLimitInfo: interprovincialSpotDeclaration.powerLimitInfo,
  provinceId: interprovincialSpotDeclaration.provinceId,
  type: interprovincialSpotDeclaration.type,
}))(OrderStatus);
